<script setup lang="ts">
const props = defineProps<{
  changeRoute?: boolean
}>()

const emit = defineEmits<{
  search: [keyword: string]
}>()

const router = useRouter()
const { query, path } = useRoute()

const keyword = ref(query.q)
watch(keyword, (newKeyWord) => {
  if (!props.changeRoute)
    return
  router.push({
    path,
    query: { q: newKeyWord },
  })
})

function onEnter() {
  if (keyword.value)
    emit('search', keyword.value as string)
}
</script>

<template>
  <div>
    <h1 text="[42px] max-md:[24px] center" m="b-[66px] max-md:b-[16px]" class="opacity-20">
      Search
    </h1>
    <div class="flex justify-center">
      <div class="flex items-center" w="[660px]" p="b-[20px] max-md:b-[4px]" text="[24px] max-md:[14px]" border="b-[2px] [var(--primary-color)]">
        <input v-model="keyword" flex="1" outline="none" @keyup.enter="onEnter" />
        <img class="h-[32px] w-[32px] max-md:h-[16px] max-md:w-[16px]" src="~assets/img/icon_search_outline.png" alt="" srcset="" @click="onEnter">
      </div>
    </div>
  </div>
</template>
